import React, { Component } from 'react';
import Footer from './Footer';
import Header from './Header';
import List from './List'
import '../../app.scss'

export default class App extends Component {
  state = {
    todos: [
      { id: '001', name: "吃饭", done: true }
    ]
  }

  addTodo = (todoObj) => {
    const { todos } = this.state
    const flag = todos.some(todo =>  todo.name === todoObj.name );
    if (flag) {
      return alert('名称重复')
    }
    this.setState({ todos: [todoObj, ...todos] })
  }

  updateTodo = (id, done) => {
    const { todos } = this.state
    const newTodos = todos.map((todoObj) => {
      if (todoObj.id === id) return { ...todoObj, done }
      else return todoObj
    })
    this.setState({ todos: newTodos })
  }

  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter((todoObj) => {
      return todoObj.id !== id
    })
    this.setState({ todos: newTodos })
  }

  updateAllTodoDone = (done) => {
    const { todos } = this.state
    const newTodos = todos.map((todoObj) => {
      return { ...todoObj, done }
    })
    this.setState({ todos: newTodos })
  }

  clearAllDone = () => {
    const { todos } = this.state
    const newTodos = todos.filter((todoObj) => {
      return !todoObj.done
    })
    this.setState({ todos: newTodos })
  }

  render() {
    const { todos } = this.state
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} clearAllDone={this.clearAllDone} updateAllTodoDone={this.updateAllTodoDone} />
        </div>
      </div>

    )
  }
}

